<div class="register-body">
<header>
  <div class="uk-container uk-container-center">
    <div class="grid">
      <div class="left">
        <a href=""><img src="assets/img/logo@2x.png" alt=""></a>
        <h3>欢迎注册</h3>
      </div>
      <div class="right">
        <span>已有账号？</span>
        <a [routerLink]="['/login']">请登陆</a>
      </div>
    </div>
  </div>
</header>
<div class="register-content">
  <div class="uk-container uk-container-center">
    <div class="grid uk-margin-bottom">
      <div class="width-57-100 left-group-input">
        <form class="signup-form"
              (submit)="onRegister()"
              [formGroup]="signupForm"
              novalidate
        >
          <div formGroupName="userData">
          <div class="rows">
            <div class="group-input"
                 [ngClass]="{'invalid': !signupForm.get('userData.userName').valid
                 && signupForm.get('userData.userName').touched
                 && signupForm.get('userData.userName').errors}"
            >
              <label for="userName">用户名</label>
              <input type="text"
                     name="userName"
                     id="userName"
                     placeholder="您的账户名和登录名"
                     formControlName="userName"
                    />
              <div
                *ngIf="signupForm.get('userData.userName').valid
                && signupForm.get('userData.userName').touched"
                [ngClass]="{'valid': signupForm.get('userData.userName').valid
                && signupForm.get('userData.userName').touched}">
                <i class="iconfont">&#xe622;</i>
              </div>
            </div>
            <div class="error-messages"
                 *ngIf="!signupForm.get('userData.userName').valid
                 && signupForm.get('userData.userName').touched
                 && signupForm.get('userData.userName').errors">
              <span
                *ngIf="signupForm.get('userData.userName').errors['required']">
                请填写您的用户名
              </span>
              <span
                *ngIf="signupForm.get('userData.userName').errors['userNameStrength']">
                用户名的长度是4-20位
              </span>
              <span
                *ngIf="signupForm.get('userData.userName').errors['nameIsForbidden']">
                该用户名已经被注册
              </span>
            </div>
          </div>
          <div class="rows">
            <div class="group-input"
                 [ngClass]="{'invalid': !signupForm.get('userData.password').valid
                 && signupForm.get('userData.password').touched}">
              <label for="password1">设置密码</label>
              <input type="password"
                     id="password1"
                     formControlName="password"
                     placeholder="建议至少使用两种字符组合" />
              <div
                *ngIf="signupForm.get('userData.password').valid
                && signupForm.get('userData.password').touched"
                [ngClass]="{'valid': signupForm.get('userData.password').valid
                && signupForm.get('userData.password').touched}">
                <i class="iconfont">&#xe622;</i>
              </div>
            </div>
            <div class="error-messages"
                 *ngIf="!signupForm.get('userData.password').valid
                 && signupForm.get('userData.password').touched">
              <span
                *ngIf="signupForm.get('userData.password').errors['required']">
                请填写您的密码</span>
              <span
                *ngIf="signupForm.get('userData.password').errors['passwordIntensity']">
                密码格式错误</span>
            </div>
            <div class="indensity-tips" *ngIf="intensityCheck">
              <span>{{passIntensity}}</span>
            </div>
          </div>
          <div class="rows">
            <div class="group-input"
                 [ngClass]="{'invalid': !signupForm.get('userData.password2').valid
                 && signupForm.get('userData.password2').touched}">
              <label for="password2">确认密码</label>
              <input type="password"  formControlName="password2"
                     id="password2" placeholder="请再次输入密码" />
              <div
                *ngIf="signupForm.get('userData.password2').valid
                && signupForm.get('userData.password2').touched"
                [ngClass]="{'valid': signupForm.get('userData.password2').valid
                && signupForm.get('userData.password2').touched}">
                <i class="iconfont">&#xe622;</i>
              </div>
            </div>
            <div class="error-messages"
                 *ngIf="!signupForm.get('userData.password2').valid
                 && signupForm.get('userData.password2').touched">
              <span
                *ngIf="signupForm.get('userData.password2').errors['required']">
                请填写确认密码</span>
              <span
                *ngIf="signupForm.get('userData.password2').errors['notSamePass']">
               两次密码不一样</span>
            </div>
          </div>
          <div class="rows">
            <div class="group-input"
                 [ngClass]="{'invalid': !signupForm.get('userData.email').valid
                 && signupForm.get('userData.email').touched}">
              <label for="email">邮箱验证</label>
              <input type="email" name="email"
                     id="email"
                     email
                     placeholder="建议使用常用邮箱"
                     formControlName="email"
              />
              <div
                *ngIf="signupForm.get('userData.email').valid
                && signupForm.get('userData.email').touched"
                [ngClass]="{'valid': signupForm.get('userData.email').valid
                && signupForm.get('userData.email').touched}">
                <i class="iconfont">&#xe622;</i>
              </div>
            </div>
            <div class="error-messages"
                 *ngIf="signupForm.get('userData.email').invalid
                 && signupForm.get('userData.email').touched">
              <span
                *ngIf="signupForm.get('userData.email').errors['email']">
                请填写合法的邮箱</span>
            </div>
          </div>
          <div class="rows">
            <div class="group-input"
                 [ngClass]="{'invalid': !signupForm.get('userData.telphone').valid
                 && signupForm.get('userData.telphone').touched}">
              <label for="userName">中国0086</label>
              <input type="text" name="phone"
                     placeholder="建议使用常用手机"
                     formControlName="telphone" />
              <div
                *ngIf="signupForm.get('userData.telphone').valid
                && signupForm.get('userData.telphone').touched"
                [ngClass]="{'valid': signupForm.get('userData.telphone').valid
                && signupForm.get('userData.telphone').touched}">
                <i class="iconfont">&#xe622;</i>
              </div>
            </div>
            <p class="email-code">邮箱验证</p>
            <span
              *ngIf="inputTip">
                qwew123</span>
            <div class="error-messages"
                 *ngIf="!signupForm.get('userData.telphone').valid
                 && signupForm.get('userData.telphone').touched">
              <span
                *ngIf="signupForm.get('userData.telphone').errors['required']">
                请填写手机号码</span>
              <span
                *ngIf="signupForm.get('userData.telphone').errors['wrongPhone']">
               手机号码格式错误</span>
            </div>
          </div>
          </div>
          <div class="rows">
            <div class="group-input">
              <label for="code">验证码</label>
              <input type="text"
                     name="code" id="code"
                     placeholder="请输入验证码"
              />
            </div>
          </div>
          <div class="rows">
            <div class="group-input">
              <label for="phoneCode">手机验证码</label>
              <input type="text"
                     name="phoneCode"
                     id="phoneCode"
                     placeholder="请输入手机验证码"
                     #p
              />
            </div>
          </div>

          <div class="checkbox-div">
            <input type="checkbox" formControlName="checkbox" [ngModel]="userAgree" />
            <span>阅读并同意
              <a (click)="onShowProtocol()">《京东用户注册协议》</a>
              <a href="">《隐私政策》</a>
            </span>
          </div>
          <div class="group-input register-btn" >
            <button type="submit"
                    [disabled]="signupForm.invalid || !signupForm.valid
                    && signupForm.touched">立即注册</button>
          </div>
        </form>
      </div>
      <div class="width-43-100"></div>
    </div>
  </div>
</div>
</div>
<app-protocol [(visible)]="showProtocolModal" [(userAgree)]="userAgree"></app-protocol>

